<template>
    <div class="body">
        <TitleTips title="工程量清单汇总表" />
        <BaseTable id="table1" :columns="columns1" :data="list1" style="margin-bottom: 24px;" show-summary :summary-method="(params) => summaryMethod(params, 'amount1')"></BaseTable> 
        <TitleTips title="计日工汇总表" />
        <BaseTable id="table2" :columns="columns2" :data="list2" style="margin-bottom: 24px;" show-summary :summary-method="(params) => summaryMethod(params, 'amount2')"></BaseTable>
    </div>
</template>

<script>
import { ProjectLedgerModel } from '@/models'

export default {
    name: 'ListSummary',
    data() {
        return {
            model: new ProjectLedgerModel(),
            list1: [],
            list2: [],
            amount1: '',
            amount2: '',
            columns1: Object.freeze([
                {
                    attrs: {
                        prop: 'number',
                        label: '序号',
                        width: '100',
                        type: 'index'
                    }
                },
                {
                    attrs: {
                        prop: 'chapterSequenceCode',
                        label: '章次'
                    }
                },
                {
                    attrs: {
                        prop: 'chapterSequenceName',
                        label: '科目名称'
                    }
                },
                {
                    attrs: {
                        prop: 'amount',
                        label: '金额（元）'
                    }
                }
            ]),
            columns2: Object.freeze([
                {
                    attrs: {
                        prop: 'number',
                        label: '序号',
                        width: '100',
                        type: 'index'
                    }
                },
                {
                    attrs: {
                        prop: 'chapterSequenceName',
                        label: '名称'
                    }
                },
                {
                    attrs: {
                        prop: 'amount',
                        label: '金额（元）'
                    }
                }
            ])
        }
    },
    async mounted () {
        await this.getStatisticsist()
        this.$nextTick(() => {
            const tds1 = document.querySelectorAll('#table1 .el-table__footer-wrapper tr>td')
            document.querySelectorAll('#table1 .el-table__footer-wrapper')[0].style.fontWeight = 'bold'
            tds1[0].colSpan = this.columns1.length - 1
            tds1[0].style.textAlign = 'center'
            for (let index = 1; index < this.columns1.length - 1; index++) {
                tds1[index].style.display = 'none'
            }

            const tds2 = document.querySelectorAll('#table2 .el-table__footer-wrapper tr>td')
            document.querySelectorAll('#table2 .el-table__footer-wrapper')[0].style.fontWeight = 'bold'
            tds2[0].colSpan = this.columns2.length - 1
            tds2[0].style.textAlign = 'center'
            for (let index = 1; index < this.columns2.length - 1; index++) {
                tds2[index].style.display = 'none'
            }
        })
    },
    methods: {
        summaryMethod(param, type) {
            const { columns, data } = param
            const sums = []
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = '合计'
                    return
                }
                if (index === columns.length - 1) {
                    sums[index] = this[type]
                }
            })
            return sums
        },
        getStatisticsist() {
            // msType 1日常养护 2 养护工程另外一个模块
            return this.model.statisticsist({projectId: this.$route.query.id, msType: 2}).then(res => {
                console.log(res)
                this.list1 = res.billList || []
                this.list2 = res.dayWorkList || []
                this.amount1 = res.billTotalAmount || ''
                this.amount2 = res.dayWorkTotalAmount || ''
            })
        }
    },
}
</script>

<style lang="scss" scoped>

</style>
